<template>
  <div class="subtitle">
    <img :src="subtitleImg" draggable="false">
    <img class="sound-svg" draggable="false" src="../assets/pictures/icon/sound.png" @click.stop="playAudio()">
    <audio id="music" :src="subtitleMusic" hidden></audio>
  </div>
</template>

<script>
export default {
  name: "Subtitle",
  props: {
    subtitleImg: String,
    subtitleMusic: String
  },
  methods: {
    playAudio() {
      let audio = document.getElementById('music');
      audio.play();
    }
  }
}
</script>

<style lang="scss" scoped>
@import "src/assets/scss/div";

.sound-svg {
  background: $font-color;
  margin-left: -21px;
  padding: 52px 0px 25px 0px;
  cursor: pointer;
}
</style>